<template>
  <div class="feedback-management-container">
    <!-- 顶部标题和搜索区 -->
    <div class="header-section">
      <div class="title-section">
        <h2 class="page-title">
          <i class="el-icon-chat-line-round"></i>
          用户反馈管理系统
        </h2>
        <div class="search-box">
          <el-input
            placeholder="搜索留言标题/内容"
            v-model="searchKey"
            class="search-input"
            clearable
            @clear="getList"
            @keyup.enter.native="getList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getList"
              class="search-btn"
            ></el-button>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 反馈表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="feedback-table"
        v-loading="loading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column
          label="序号"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <span class="index-number">{{ (cp - 1) * pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="title"
          label="反馈标题"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span class="feedback-title">{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="反馈内容"
          width="220"
        >
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              width="300"
              trigger="hover"
              :content="scope.row.content"
            >
              <div slot="reference" class="feedback-content">
                {{ scope.row.content.length > 15 ? scope.row.content.substring(0, 15) + '...' : scope.row.content }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="createTime"
          label="提交时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span class="create-time">{{ formatDateTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="回复状态"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.answer ? 'success' : 'warning'"
              effect="dark"
            >
              {{ scope.row.answer ? '已回复' : '待回复' }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          label="回复内容"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.answer" class="answer-content">
              {{ scope.row.answer }}
            </div>
            <div v-else class="no-answer">
              <i class="el-icon-warning"></i> 暂无回复
            </div>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="answerTime"
          label="回复时间"
          width="180"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.answerTime" class="answer-time">
              {{ formatDateTime(scope.row.answerTime) }}
            </span>
            <span v-else class="no-answer-time">--</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="操作"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-tooltip content="回复反馈" placement="top" v-if="!scope.row.answer">
              <el-button
                @click.native.prevent="answerEvent(scope)"
                type="primary"
                icon="el-icon-edit"
                size="mini"
                circle
              ></el-button>
            </el-tooltip>
            
            <el-tooltip content="查看详情" placement="top">
              <el-button
                @click.native.prevent="showDetail(scope.row)"
                type="info"
                icon="el-icon-view"
                size="mini"
                circle
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="changeCP"
        :current-page="cp"
        :page-size="pageSize"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 回复对话框 -->
    <el-dialog
      :title="`回复反馈 - ${currentFeedbackTitle}`"
      :visible.sync="centerDialogVisible"
      width="50%"
      class="reply-dialog"
    >
      <div class="original-content">
        <h4>原始反馈内容：</h4>
        <p>{{ currentFeedbackContent }}</p>
      </div>
      
      <el-input 
        :rows="5" 
        type="textarea" 
        v-model="answer" 
        maxlength="500" 
        show-word-limit
        placeholder="请输入回复内容..."
        class="reply-textarea"
      ></el-input>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" class="dialog-btn">取 消</el-button>
        <el-button 
          type="primary" 
          @click="sureAnswer" 
          class="dialog-btn"
          :loading="replying"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>

    <!-- 反馈详情对话框 -->
    <el-dialog
      :title="`反馈详情 - ${detailData.title || ''}`"
      :visible.sync="detailDialogVisible"
      width="60%"
      class="detail-dialog"
    >
      <div class="detail-content" v-if="detailData.title">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="反馈标题">{{ detailData.title }}</el-descriptions-item>
          <el-descriptions-item label="反馈内容">{{ detailData.content }}</el-descriptions-item>
          <el-descriptions-item label="提交时间">{{ formatDateTime(detailData.createTime) }}</el-descriptions-item>
          <el-descriptions-item label="回复状态">
            <el-tag :type="detailData.answer ? 'success' : 'warning'" effect="dark">
              {{ detailData.answer ? '已回复' : '待回复' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="回复内容" v-if="detailData.answer">{{ detailData.answer }}</el-descriptions-item>
          <el-descriptions-item label="回复时间" v-if="detailData.answerTime">{{ formatDateTime(detailData.answerTime) }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      cp: 1,
      pageSize: 10,
      total: 0,
      centerDialogVisible: false,
      detailDialogVisible: false,
      answer: '',
      id: '',
      searchKey: '',
      loading: false,
      replying: false,
      currentFeedbackTitle: '',
      currentFeedbackContent: '',
      detailData: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    formatDateTime(dateTimeStr) {
      if (!dateTimeStr) return '--'
      // 处理时间格式，去掉T和.000Z
      return dateTimeStr.replace('T', ' ').split('.')[0]
    },
    
    answerEvent(scope) {
      this.answer = ''
      this.id = scope.row.id
      this.currentFeedbackTitle = scope.row.title
      this.currentFeedbackContent = scope.row.content
      this.centerDialogVisible = true
    },
    
    sureAnswer() {
      if (this.answer === '') {
        this.$message.error('回复内容不能为空')
        return
      }
      
      this.replying = true
      this.$axios.post('/api/message/answer', {
        id: this.id,
        answer: this.answer
      })
        .then(res => {
          if (res.data.code == '001') {
            this.$message.success(res.data.msg)
            this.centerDialogVisible = false
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch(() => {
          this.$message.error('回复失败，请稍后重试')
        })
        .finally(() => {
          this.replying = false
        })
    },
    
    getList() {
      this.loading = true
      this.$axios.post('/api/message/getAdminList', {
        cp: this.cp,
        searchKey: this.searchKey
      })
        .then(res => {
          this.tableData = res.data.data.data || []
          this.total = res.data.data.total || 0
          
          // 格式化时间
          this.tableData.forEach(item => {
            item.answerTime = item.answerTime ? this.formatDateTime(item.answerTime) : ''
            item.createTime = item.createTime ? this.formatDateTime(item.createTime) : ''
          })
        })
        .catch(() => {
          this.$message.error('获取反馈列表失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    
    changeCP(index) {
      this.cp = index
      this.getList()
    },
    
    showDetail(row) {
      this.detailData = { ...row }
      this.detailDialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
.feedback-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
}

.header-section {
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  
  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .page-title {
      margin: 0;
      font-size: 18px;
      color: #333;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 10px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    
    .search-box {
      width: 300px;
      
      .search-input {
        border-radius: 4px;
        
        ::v-deep .el-input__inner {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      
      .search-btn {
        background-color: #409EFF;
        color: white;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        
        &:hover {
          background-color: #66b1ff;
        }
      }
    }
  }
}

.table-container {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  margin-bottom: 20px;
  
  .feedback-table {
    border-radius: 4px;
    overflow: hidden;
    
    ::v-deep th {
      background-color: #f8f8f9 !important;
      font-weight: 600;
      color: #515a6e;
    }
    
    .index-number {
      color: #909399;
    }
    
    .feedback-title {
      font-weight: 500;
      color: #333;
    }
    
    .feedback-content {
      color: #666;
      cursor: pointer;
      
      &:hover {
        color: #409EFF;
      }
    }
    
    .create-time, .answer-time {
      color: #666;
      font-size: 13px;
    }
    
    .no-answer {
      color: #F56C6C;
      display: flex;
      align-items: center;
      
      i {
        margin-right: 5px;
      }
    }
    
    .answer-content {
      color: #67C23A;
    }
    
    .no-answer-time {
      color: #999;
      font-style: italic;
    }
  }
}

.pagination-container {
  text-align: right;
  padding: 10px 0;
}

.reply-dialog {
  .original-content {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    
    h4 {
      margin: 0 0 10px 0;
      color: #333;
    }
    
    p {
      margin: 0;
      color: #666;
      line-height: 1.6;
    }
  }
  
  .reply-textarea {
    ::v-deep .el-textarea__inner {
      min-height: 120px !important;
    }
  }
  
  .dialog-footer {
    .dialog-btn {
      padding: 10px 20px;
    }
  }
}

.detail-dialog {
  .detail-content {
    padding: 10px;
    
    ::v-deep .el-descriptions__body {
      background-color: #fafafa;
    }
  }
}
</style>